<template>
  <div class="main">
    <el-form
      :model="roomForm"
      :rules="rules"
      label-position="top"
      ref="roomForm"
      class="form"
    >
      <el-form-item label="名称" prop="name" class="stay">
        <el-input v-model="roomForm.name"></el-input>
      </el-form-item>
      <el-form-item label="地点" prop="located" class="stay">
        <el-input v-model="roomForm.located"></el-input>
      </el-form-item>
      <el-form-item label="座位信息" class="stay">
        <div class="">
          双人桌
          <el-input-number
            controls-position="right"
            size="small"
            v-model="roomForm.seats.T"
            :min="0"
            :max="100"
            label="双人桌"
          ></el-input-number>
        </div>
        <div class="">
          四人桌
          <el-input-number
            controls-position="right"
            size="small"
            v-model="roomForm.seats.F"
            :min="0"
            :max="50"
            label="四人桌"
          ></el-input-number>
        </div>
        <div class="">
          六人桌
          <el-input-number
            controls-position="right"
            size="small"
            v-model="roomForm.seats.S"
            :min="0"
            :max="30"
            label="六人桌"
          ></el-input-number>
        </div>
        <div class="">
          八人桌
          <el-input-number
            controls-position="right"
            size="small"
            v-model="roomForm.seats.E"
            :min="0"
            :max="20"
            label="八人桌"
          ></el-input-number>
        </div>
      </el-form-item>
      <el-form-item label="开放时间" prop="open_time" class="stay">
        <el-checkbox-group v-model="roomForm.open_time">
          <el-checkbox label="周一"></el-checkbox>
          <el-checkbox label="周二"></el-checkbox>
          <el-checkbox label="周三"></el-checkbox>
          <el-checkbox label="周四"></el-checkbox>
          <el-checkbox label="周五"></el-checkbox>
          <el-checkbox label="周六"></el-checkbox>
          <el-checkbox label="周日"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否开放" prop="open" class="stay">
        <el-switch v-model="roomForm.open"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="createRoom('roomForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addReadingRoom } from "@network/manager";

import { mapMutations } from "vuex";
export default {
  data() {
    return {
      checkList: [],
      dayList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      roomForm: {
        name: "",
        open_time: [],
        open: true,
        located: "",
        seats: {
          T: 0,
          F: 0,
          S: 0,
          E: 0,
        },
      },
      rules: {
        name: [
          { required: true, message: "请输入阅览室名称", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        located: [
          { required: true, message: "请输入阅览室地点", trigger: "blur" },
          {
            min: 3,
            max: 18,
            message: "长度在 3 到 18 个字符",
            trigger: "blur",
          },
        ],
        open_time: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个开放时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    hasPosition() {
      return (
        this.roomForm.seats.T ||
        this.roomForm.seats.F ||
        this.roomForm.seats.S ||
        this.roomForm.seats.E
      );
    },
  },
  methods: {
    ...mapMutations(["setNotice"]),
    resetPosition() {
      this.roomForm.seats.T = 0;
      this.roomForm.seats.F = 0;
      this.roomForm.seats.S = 0;
      this.roomForm.seats.E = 0;
    },
    createSeats() {
      let seats = {
          T: [],
          F: [],
          S: [],
          E: [],
        },
        total = 0;
      for (let seat in this.roomForm.seats) {
        seats[seat].length = this.roomForm.seats[seat];
        switch (seat) {
          case "T":
            {
              total += 2 * seats[seat].length;
              let arr = [[0, 0]];
              seats[seat].fill(arr, 0, seats[seat].length);
            }
            break;
          case "F":
            {
              total += 4 * seats[seat].length;
              let arr = [
                [0, 0],
                [0, 0],
              ];
              seats[seat].fill(arr, 0, seats[seat].length);
            }
            break;
          case "S":
            {
              total += 6 * seats[seat].length;
              let arr = [
                [0, 0],
                [0, 0],
                [0, 0],
              ];
              seats[seat].fill(arr, 0, seats[seat].length);
            }
            break;
          case "E":
            {
              total += 8 * seats[seat].length;
              let arr = [
                [0, 0],
                [0, 0],
                [0, 0],
                [0, 0],
              ];
              seats[seat].fill(arr, 0, seats[seat].length);
            }
            break;
          default:
            return [];
        }
      }
      return { seats, total };
    },
    formateTime() {
      let day = [];
      this.roomForm.open_time.includes("周一") && day.push("周一");
      this.roomForm.open_time.includes("周二") && day.push("周二");
      this.roomForm.open_time.includes("周三") && day.push("周三");
      this.roomForm.open_time.includes("周四") && day.push("周四");
      this.roomForm.open_time.includes("周五") && day.push("周五");
      this.roomForm.open_time.includes("周六") && day.push("周六");
      this.roomForm.open_time.includes("周日") && day.push("周日");
      return JSON.stringify(day);
    },
    createRoom(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.hasPosition) {
            this.$message.error("位置信息不能为空");
          } else {
            let { seats, total } = this.createSeats(),
              open_time = this.formateTime(),
              { name, open, located } = this.roomForm;
            addReadingRoom({
              seats,
              open_time,
              name,
              open,
              located,
              total,
            }).then((res) => {
              if (res.data.tag) {
                this.$message.success("添加成功");
                this.resetForm();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          }
        } else {
          this.$message.error("请填写必要信息");
        }
      });
    },
    resetForm() {
      this.resetPosition();
      this.$refs["roomForm"].resetFields();
    },
  },
  activated() {
    console.log("actived");
    this.setNotice("添加阅览室");
  },
};
</script>
<style scoped>
.form {
  background-color: whitesmoke;
  padding: 0 30px;
  height: 88vh;
  box-sizing: border-box;
  overflow: auto;
}

.stay {
  height: auto;
}
</style>
